import Vue from 'vue';
import VueX from 'vuex';
Vue.use(VueX);

export default new VueX.Store({
  state: {
    //state用于存放数据
    //标签页数据
    /*editableTabsValue: '0',
    editableTabs: [],
    tabIndex: 1*/

  },
  getters:{
    //Getter用于对Store中的数据进行加工处理形成新的数据。Getter不会修改Store中的原数据，只起到一个包装器的作用。
    /*showEditableTabsValue:state => {
      return state.editableTabsValue
    },
    showEditableTabs:state => {
      return state.editableTabs
    },
    showTabIndex:state => {
      return state.tabIndex
    }*/
  },
  mutations:{
    //　Mutation 用于变更 Store 中的数据只能通过 mutation 变更 Store 数据，不可以直接操作 Store 中的数据，通过commit一个mutation来修改，它的本质实际是一个function
    // 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化
    // mutation 操作一定是同步的
    // 我们每次提交 mutation 都会有一个记录，Vuex 这样做是为了更方便的记下每个数据改变的历史和轨迹，方便监听以及回滚之类的操作
    //增加标签页数据
    /*addTagValue(state,key){
      //let newTabName = ++this.tabIndex + ''; name是选项卡别名 与value对应
      state.tabIndex++;
      console.log('1111',state.tabIndex);
      let newTabName=state.tabIndex+'';
      state.editableTabs.push({
        title: key,
        name:newTabName,
        content: key
      })
      state.editableTabsValue = newTabName;
      console.log('222222',state.editableTabsValue);
    },
    removeTag(state,targetName){
      let tabs = state.editableTabs;
      let activeName = state.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }
      state.editableTabsValue = activeName;
      state.editableTabs = tabs.filter(tab => tab.name !== targetName);
    }*/
  },
  actions:{
    // Action 用于处理异步任务。
    //
    // 　　    如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation，但是在 Action 中还是要通过触发 Mutation 的方式间接变更数据。

  },
});

